<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>日志管理</title>
    <link rel="stylesheet" href='/plug-in/pear/css/pear.css' media="all">
    <link rel="stylesheet" href='/css/base.css'>
</head>
<body>
<div class="page-content" shiro:hasPermission="system.log.list">
    <table class="layui-hide" id="table" lay-filter="table"></table>
</div>

<script type="text/html" id="toolbarTop">
    <div class="layui-btn-container">
        <button shiro:hasPermission="system.log.list" class="layui-btn layui-btn-sm layui-bg-black" lay-event="refresh"><span class="fa fa-refresh" title="刷新表格" aria-hidden="true"></span></button>
        <button shiro:hasPermission="system.log.clear" class="layui-btn layui-btn-sm layui-bg-red" lay-event="clear"><span
                class="fa fa-trash-o" aria-hidden="true"></span> 清空日志</button>
    </div>
</script>

<script src="/plug-in/jquery/jquery-3.5.1.min.js" charset="utf-8"></script>
<script src='/plug-in/layui/layui.js' charset="utf-8"></script>
<script src='/plug-in/lay-config.js' charset="utf-8"></script>
<script type="text/javascript" shiro:hasPermission="system.log.list" >
    let form = layui.form, layer=layui.layer, table = layui.table;


    let tab = table.render({
        elem: '#table',
        url: '/log/selectPage',
        page: {
            layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
            groups: 3, //只显示 1 个连续页码
        },
        height: "full-50",
        limit: 30,
        skin: "line",
        limits: [30, 45, 60],
        toolbar: '#toolbarTop', //开启头部工具栏，并为其绑定左侧模板
        //defaultToolbar: null,
        parseData: function (res) { //res 即为原始返回的数据
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "total": res.data.total, //解析数据长度
                "data": res.data.records //解析数据列表
            };
        },
        title: "操作日志",
        response: {
            statusCode: 200, //规定成功的状态码，默认：0
            countName: 'total' //规定数据总数的字段名称，默认：count
        },
        cols: [
            [{
                    field: "username",
                    minWidth: 120,
                    title: '操作用户'
                },
                {
                    field: "operation",
                    minWidth: 120,
                    title: '操作',
                },
                {
                    width: 120,
                    title: '操作类型',
                    align: "center",
                    templet: function (d) {
                        if (d.type===0){
                            return '<span class="layui-badge layui-bg-green">登录</span>'
                        }else if(d.type===1){
                            return '<span class="layui-badge layui-bg-blue">查询</span>'
                        }else if(d.type===2){
                            return '<span class="layui-badge layui-bg-orange">新增</span>'
                        }else  if(d.type===3){
                            return '<span class="layui-badge layui-bg-cyan">修改</span>'
                        } else {
                            return '<span class="layui-badge">删除</span>'
                        }
                    }
                },
                {
                    field: "method",
                    minWidth: 120,
                    title: 'Java方法',
                },
                {
                    field: "ip",
                    width: 120,
                    title: 'IP地址',
                },
                {
                    field: "url",
                    minWidth: 120,
                    title: '请求URL',
                },
                {
                    field: "createdTime",
                    width: 180,
                    title: '操作时间',
                }
            ]
        ],
        done: ()=>{
            let maxHeight = $(".layui-table-body.layui-table-main").css("height");
            $(".layui-table-body.layui-table-main").removeAttr("style").css("max-height", maxHeight)}
    });

    table.on('toolbar(table)', function(obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        switch (obj.event) {
            case 'refresh':
                tab.reload({
                    page: {
                        curr: 1
                    }
                })
                break;
            case "clear":
                layer.confirm('确定要清空日志么？', {
                    icon: 3,
                    title: '温馨提示'
                }, function (index) {
                    layer.close(index);
                    layer.load()
                    $.ajax({
                        url: '/log/clear',
                        success: function (result) {
                            if (result.code == 200) {
                                tab.reload();
                                layer.closeAll('loading')
                                layer.msg("清空完成")
                            } else {
                                layer.closeAll('loading')
                                layer.msg("清空失败")
                            }
                        },
                        error: function () {
                            layer.closeAll('loading')
                            layer.msg("请求失败")
                        }
                    });
                });
                break;
        };
    });

</script>
</body>
</html>